<!DOCTYPE html>
<style>
dt {
  float: left;
  width: 19ch;
}
dd {
  margin-left: 20ch;
}
div {
  border: thick solid blue;
  width: 8ch;
  font-family: 'Courier New';
}
.ahem {
  font-family: ahem;
}
</style>
<body lang="en-us">
<dl>
  <dt>hyphens
  <dd><div>hyphen-<br>ation is</div>
  <dd><div>hyphen-<br>ation</div>
  <dt>hyphens break-word
  <dd><div>hyphen-<br>ation is</div>
  <dd><div>hyphen-<br>ation</div>
  <dt>hyphens break-all
  <dd><div>hyphen-<br>ation is</div>
  <dd><div>hyphen-<br>ation</div>
  <dt>hyphens break-all break-word
  <dd><div>hyphen-<br>ation is</div>
  <dd><div>hyphen-<br>ation</div>
  <dt>break-word
  <dd><div class="ahem">XXXXXXXX<br>)</div>
  <dt>break-all
  <dd><div class="ahem">XXXXXXX<br>X)</div>
  <dt>break-all break-word
  <dd><div class="ahem">XXXXXXX<br>X)</div>
</dl>
</body>
